﻿@page "/docs/components/color-picker"

<Seo Canonical="/docs/components/color-picker" Title="Blazorise ColorPicker component" Description="The ColorPicker allows you to select a color using a variety of input methods." />

<DocsPageTitle>
    ColorPicker component
</DocsPageTitle>

<DocsPageParagraph>
    <Code>ColorPicker</Code> is based on a <Blazorise.Link To="https://simonwep.github.io/pickr/">Pickr</Blazorise.Link> library
    and as such is not a native color input element. That means that unlike <code>ColorEdit</code> which will render <Code>type="color"</Code>,
    <Code>ColorPicker</Code> will render <Code>span</Code> element.
</DocsPageParagraph>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic Example">
        Click the red area to activate the color picker. This is the basic variation of it.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicColorPickerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicColorPickerExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Attributes
</DocsPageSubtitle>

<DocsAttributes>
    <DocsAttributesItem Name="Color" Type="string" Default="null">
        Gets or sets the input color value in hex format.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ColorChanged" Type="EventCallback<string>">
        Occurs when the color has changed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Palette" Type="string[]">
        List a colors below the colorpicker to make it convenient for users to choose from frequently or recently used colors.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ShowPalette" Type="bool" Default="true">
        Controls the visibility of the palette below the colorpicker to make it convenient for users to choose from frequently or recently used colors.
    </DocsAttributesItem>
    <DocsAttributesItem Name="HideAfterPaletteSelect" Type="bool" Default="true">
        Automatically hides the dropdown menu after a palette color is selected.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ShowClearButton" Type="bool" Default="true">
        Controls the visibility of the clear buttons.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ShowCancelButton" Type="bool" Default="true">
        Controls the visibility of the cancel buttons.
    </DocsAttributesItem>
</DocsAttributes>